<template>
<el-dialog :title="title" v-model="dialogVisible" @close="dialogFormVisible" :close-on-click-modal="false"
    :close-on-press-escape="false" width="600px">
    <el-form size="small">
      <div class="table-wrap">
        <div class="operation-wrap">
          <p> {{$t('setting.config_note_label')}}</p>
          <p> {{$t('setting.tpl_step1_note')}}</p>
          <p> {{$t('setting.wechat_template_tip_2')}}</p>
		  <p>{{msg}}</p>
        </div>
        <div>
          <el-form-item :label="$t('setting.wechat_template_id')">
            <el-input size="small" class="max-w460" v-model.trim="templateId" :placeholder="$t('setting.input_wechat_template_id')"></el-input>
          </el-form-item>
        </div>
        <el-table border ref="fieldTable" :data="fieldList" @selection-change="handleSelectionChange" v-loading="loading">
          <el-table-column type="selection" width="55">
          </el-table-column>
          <el-table-column :label="$t('setting.field_name')">
            <template #default="scope">
              <label v-text="scope.row.fieldName"></label>
            </template>
          </el-table-column>
          <el-table-column :label="$t('setting.template_variable_name')">
            <template #default="scope">
              <el-input size="small" prop="fieldNewEname" v-model.trim="scope.row.fieldNewEname"></el-input>
            </template>
          </el-table-column>
          <el-table-column :label="$t('setting.template_content')">
            <template #default="scope">
              <el-input size="small" prop="filedNewValue" :disabled="scope.row.isVar === 1" v-model.trim="scope.row.filedNewValue"></el-input>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-form>
    <template #footer>
        <div class="dialog-footer">
            <el-button @click="dialogFormVisible">{{$t('setting.cancel_button')}}</el-button>
            <el-button type="primary" @click="saveTemplate" :loading="loading">{{$t('setting.confirm_button')}}</el-button>
        </div>
    </template>
  </el-dialog>
</template>

<script>
import MessageApi from '@/api/message.js';
export default {
  data() {
    return {
      /*左边长度*/
      formLabelWidth: '120px',
      /*是否显示*/
      dialogVisible: false,
      loading: false,
      /*是否上传图片*/
      isupload: false,
      fieldList: [],
      title: $t("setting.set_mp_template"),
      checkList: [],
      /*设置*/
      settings: {},
      templateId: '',
      msg: $t("setting.tpl_step3_var_note")
    };
  },
  props: ['open_mt', 'messageModel'],
  created() {
    this.dialogVisible = this.open_mt;
    this.title = this.title + '(' + this.messageModel.messageName + ')';
    this.getData();
  },
  methods: {
    getData: function () {
      let self = this;
      self.loading = true;
      MessageApi.fieldList({
        messageId: self.messageModel.messageId,
        messageType: 'mt'
      }, true).then(data => {
        data.data.list.forEach(function (field) {
          field['fieldNewEname'] = field.fieldEname;
          field['filedNewValue'] = field.filedValue;
        });
        self.fieldList = data.data.list;
        //设置字段
        if (data.data.settings == null || data.data.settings.length == 0) {
          self.settings = {};
          self.templateId = '';
        } else {
          self.settings = data.data.settings;
          self.templateId = data.data.settings['templateId'];
        }
        self.loading = false;
        self.$nextTick(function () {
          self.initChecked();
        });
      }).catch(error => {});
    },
    /*保存*/
    saveTemplate() {
      let self = this;
      self.loading = true;
      MessageApi.saveSettings({
        fieldList: self.checkList,
        messageId: self.messageModel.messageId,
        messageType: 'mt',
        templateId: self.templateId
      }).then(data => {
        self.loading = false;
        ElMessage({
          message: $t("setting.save_success"),
          type: 'success'
        });
        self.dialogFormVisible(true);
      }).catch(error => {
        self.loading = false;
      });
    },
    /*关闭弹窗*/
    dialogFormVisible(e) {
      if (e) {
        this.$emit('closeDialog', {
          type: 'success',
          openDialog: false
        });
      } else {
        this.$emit('closeDialog', {
          type: 'error',
          openDialog: false
        });
      }
    },
    handleSelectionChange(val) {
      this.checkList = val;
    },
    /*初始化选中*/
    initChecked: function () {
      let self = this;
      if (JSON.stringify(self.settings) == "{}") {
        return;
      }
      Object.keys(self.settings.varData).forEach(function (key) {
        self.fieldList.forEach(function (field) {
          if (field.fieldEname == key) {
            self.$refs.fieldTable.toggleRowSelection(field, true);
            field.fieldNewEname = self.settings.varData[key].fieldName;
            field.filedNewValue = self.settings.varData[key].filedValue;
          }
        });
      });
    }
  }
};
</script>

